import { useEffect, useState } from "react";

function BlogView({id}){
  // 设置本地state ，用于保存blog 内容
  const [blogContent,setBlogContent] = useState(null);
  useEffect(()=>{
    // useEffect 的 callback 要避免直接的 async 函数
    // 需要封装一下
    const doASync = async () => {
      // 当 id 发生变化时，将当前内容清除以保持一致性
      setBlogContent(null);
      // 发起请求获取数据
      const  res = await fetch(`/blog-content/${id}`);
      // 将获取的数据放入 state
      setBlogContent(await res.text());
    };
    doASync()
  },[id]) // 使用 id 做完依赖项，变化时则执行副作用

  // 如果没有bolgContent 则认为是在loading 状态
  const isLoading = !bolgContent;
  return (
    <div>
      {isLoading ? "loading。。。" : blogContent} 
    </div>
  )
}
